import React, { Component } from 'react'
import { Form, Tree, Input } from "antd";
import PropTypes from 'prop-types'
import menuList from "../../config/menuConfig";

const Item = Form.Item;
const { TreeNode } = Tree;

export default class AuthForm extends Component {
    static propTypes = {
        role: PropTypes.object
    }

    constructor(props) {
        super(props);

        // 根据传入角色的 menus 生成初始状态
        const {menus} = this.props.role;
        this.state = {
            checkedKeys: menus
        }
    }

    // 为父组件提交获取最新的menus数据的方法
    getMenus = () => this.state.checkedKeys

    getTreeNodes = (menuList) => {
        return menuList.reduce((pre, item) => {
            pre.push(
                <TreeNode title={item.title} key={item.key}>
                    {item.children ? this.getTreeNodes(item.children) : null}
                </TreeNode>
            )
            return pre
        }, [])
    }

    // 选中某个 node 时的回调函数
    onCheck = checkedKeys => {
        // console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys });
    };
    
    UNSAFE_componentWillMount() {
        this.treeNodes = this.getTreeNodes(menuList)
    }

    // 当组件接受新的属性时自动调用，render前
    // 根据新传入的 role来更新 checkedkeys 状态
    UNSAFE_componentWillReceiveProps(nextProps) {
        const menus =  nextProps.role.menus;
        this.setState({
            checkedKeys: menus
        })
    }

    render() {
        const {role} = this.props;
        const {checkedKeys} = this.state;
        // Item布局的配置对象
        const fromItemLayout = {
            labelCol: {span: 4}, // 左侧 label 的宽度
            wrapperCol: {span: 15}, // 右侧包裹的宽度
        };


        return (
            <div>
                <Item label='角色名称' {...fromItemLayout}>
                    <Input value={role.name} disabled />
                </Item>
                <Tree
                    checkable
                    defaultExpandAll
                    checkedKeys={checkedKeys}
                    onCheck={this.onCheck}
                >
                    <TreeNode title=" 平台权限" key="all">
                        {this.treeNodes}
                    </TreeNode>
                </Tree>
            </div>
        )
    }
}